﻿/*-- Backbone Model
-----------------------------------------------------------------------------------------------------------------------------------------*/
var PlaygroundModel = Backbone.Model.extend({

});


/*-- AppView
-----------------------------------------------------------------------------------------------------------------------------------------*/
var AppView = Backbone.View.extend({
    el: "#bigBoss",
    initialize: function () {
        this.model = new PlaygroundModel();
    },
    events: {
        "click #formatAllBtn": "autoFormatAll",
        "click #formatSelBtn": "autoFormatSelection"
    },
    start: function () {
        var delay;
        var contents = $('iframe').contents(),
            body = contents.find('body'),
            styleTag = $('<style></style>').appendTo(contents.find('head'));

        this.body = body;
        this.styleTag = styleTag;

        this.htmlEditor = CodeMirror.fromTextArea(document.getElementById("html"), {
            mode: 'text/html',
            autoCloseTags: true,
            lineWrapping: true,
            extraKeys: { "Ctrl-Space": "autocomplete" }
        });
        this.htmlEditor.setOption("theme", "ambiance");

        this.cssEditor = CodeMirror.fromTextArea(document.getElementById("css"), {
            mode: 'text/css',
            autoCloseTags: true,
            lineWrapping: true,
            extraKeys: { "Ctrl-Space": "autocomplete" }
        });
        this.cssEditor.setOption("theme", "ambiance");
        this.introMessage();
        this.loadOnce();

        var self = this;
        this.htmlEditor.on("change", function () {
            self.updatePreview();
        });

        this.cssEditor.on("change", function () {
            self.updatePreview();
        });

        var hlHtmlLine = this.htmlEditor.addLineClass(0, "background", "activeline");
        this.htmlEditor.on("cursorActivity", function () {
            var cur = self.htmlEditor.getLineHandle(self.htmlEditor.getCursor().line);
            if (cur != hlHtmlLine) {
                self.htmlEditor.removeLineClass(hlHtmlLine, "background", "activeline");
                hlHtmlLine = self.htmlEditor.addLineClass(cur, "background", "activeline");
            }
        });

        var hlCssLine = this.cssEditor.addLineClass(0, "background", "activeline");
        this.cssEditor.on("cursorActivity", function () {
            var cur = self.cssEditor.getLineHandle(self.cssEditor.getCursor().line);
            if (cur != hlCssLine) {
                self.cssEditor.removeLineClass(hlCssLine, "background", "activeline");
                hlCssLine = self.cssEditor.addLineClass(cur, "background", "activeline");
            }
        });

        this.autoFormatAll();
    },
    loadOnce: function () {
        var htmlText = $('#html');
        var cssText = $('#css');

        this.body.html(htmlText.val());
        this.styleTag.text(cssText.val());
    },
    updatePreview: function () {
        this.body.html(this.htmlEditor.getValue());
        this.styleTag.text(this.cssEditor.getValue());
    },
    introMessage: function () {
        var htmlText = "<div><h3>Welcome to MVC playground</h3><br/>Under construction...<br/>To stay connected follow me on twitter, my twitter handle is <a target='_blank' href='http://twitter.com/yrshaikh'>@yrshaikh</a><br/>Cheers !</div>";
        var cssText = "@import url(http://fonts.googleapis.com/css?family=Ubuntu);*{font-family:'Ubuntu',Segoe UI;}h3{margin-bottom:0px;}";
        this.htmlEditor.setValue(htmlText);
        this.cssEditor.setValue(cssText);
    },
    autoFormatAll: function () {

        CodeMirror.commands["selectAll"](this.htmlEditor);
        CodeMirror.commands["selectAll"](this.cssEditor);

        var range = this.getSelectedRange(this.htmlEditor);
        this.htmlEditor.autoFormatRange(range.from, range.to);

        console.log(range.from, range.to);

        range = this.getSelectedRange(this.cssEditor);
        this.cssEditor.autoFormatRange(range.from, range.to);

        CodeMirror.commands["goDocEnd"](this.htmlEditor);
        CodeMirror.commands["goDocEnd"](this.cssEditor);
    },
    autoFormatSelection: function () {

        var range = this.getSelectedRange(this.htmlEditor);
        this.htmlEditor.autoFormatRange(range.from, range.to);

        console.log(range.from, range.to);

        range = this.getSelectedRange(this.cssEditor);
        this.cssEditor.autoFormatRange(range.from, range.to);

        CodeMirror.commands["goDocEnd"](this.htmlEditor);
        CodeMirror.commands["goDocEnd"](this.cssEditor);
    },
    getSelectedRange: function (editor) {
        return { from: editor.getCursor(true), to: editor.getCursor(false) };
    }
});

/*-- App.Start()
-----------------------------------------------------------------------------------------------------------------------------------------*/
$(function () {
    var app = new AppView();
    app.start();
});

